{% extends 'base/base.html' %}
{% load static %}

{% block title %}聊天历史 - 盲盒商城{% endblock %}

{% block extra_css %}
<style>
    .history-container {
        padding: 20px;
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    
    .session-card {
        background-color: white;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .session-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    
    .session-card .session-time {
        color: #777;
        font-size: 14px;
    }
    
    .session-card .last-message {
        color: #555;
        margin-top: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .no-history {
        text-align: center;
        padding: 30px;
        color: #777;
    }
    
    .session-card .btn-continue {
        margin-top: 10px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container mt-5 mb-5">
    <div class="row">
        <div class="col-md-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>我的聊天历史</h2>
                <a href="{% url 'chatbot:chat_page' %}" class="btn btn-primary">开始新的对话</a>
            </div>
            
            <div class="history-container">
                {% if sessions %}
                    <div class="row">
                        {% for session in sessions %}
                            <div class="col-md-6 col-lg-4 mb-3">
                                <div class="session-card">
                                    <div class="d-flex justify-content-between">
                                        <h5>会话 #{{ forloop.counter }}</h5>
                                        <span class="session-time">{{ session.last_activity|date:"Y-m-d H:i" }}</span>
                                    </div>
                                    <div class="last-message">
                                        <strong>最后消息：</strong> {{ session.last_message }}
                                    </div>
                                    <a href="{% url 'chatbot:chat_page' %}?session_id={{ session.session_id }}" class="btn btn-sm btn-outline-primary btn-continue">继续对话</a>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="no-history">
                        <p>您还没有聊天记录</p>
                        <a href="{% url 'chatbot:chat_page' %}" class="btn btn-primary mt-3">开始第一次对话</a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %} 